<template>
  <div>
    <div :style="styleData"></div>
    <button @click="changeColor">点我变色</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
    <!-- 情况零: 添加元素到数组 页面会更新 -->
    <button @click="add">点我加一个人</button>

    <!-- 情况一: 翻转数组 页面会更新 -->
    <button @click="rev">点我翻转</button>

    <!-- 情况二: 数组截取 页面不会更新 -->
    <button @click="sli">点我截取</button>

    <!-- 情况三: 更新值 修改值 页面不会更新 -->
    <button @click="modify">点我修改</button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list:['小明','小黄毛','小花','小黑'],
      styleData:{
        backgroundColor:'purle'
      }
    };
  },

  mounted() {
    
  },

  methods: {
    add(){
      this.list.push('王五')
    },
    rev(){
      this.list.reverse()
    },
    sli(){
      this.list=this.list.slice(1)
    },
    modify(){
      this.$set(this.list,1,'小黄毛')
    },
    changeColor(){
      this.styleData.backgroundColor='red'
      this.styleData.width='500px'
    }
    
  },
};
</script>

<style scoped>
div {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>